<template>
  <ScreenLayoutWithMenu title="综合数据总览大屏">
    <div class="screen-grid grid-4x2">
      <ChartCard title="销售总览" grid-area="a">
        <ECharts :option="salesOverviewOption" />
      </ChartCard>
      <ChartCard title="用户总览" grid-area="b">
        <ECharts :option="userOverviewOption" />
      </ChartCard>
      <ChartCard title="运营总览" grid-area="c">
        <ECharts :option="operationOption" />
      </ChartCard>
      <ChartCard title="财务总览" grid-area="d">
        <ECharts :option="financeOverviewOption" />
      </ChartCard>
      <ChartCard title="核心KPI" grid-area="e">
        <div class="kpi-grid">
          <div class="kpi-item-small">
            <div class="kpi-label-small">GMV</div>
            <div class="kpi-value-small">¥12.5M</div>
          </div>
          <div class="kpi-item-small">
            <div class="kpi-label-small">DAU</div>
            <div class="kpi-value-small">125K</div>
          </div>
          <div class="kpi-item-small">
            <div class="kpi-label-small">转化率</div>
            <div class="kpi-value-small">3.8%</div>
          </div>
          <div class="kpi-item-small">
            <div class="kpi-label-small">客单价</div>
            <div class="kpi-value-small">¥217</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="趋势对比" grid-area="f">
        <ECharts :option="trendCompareOption" />
      </ChartCard>
      <ChartCard title="区域分布" grid-area="g">
        <ECharts :option="regionCompareOption" />
      </ChartCard>
      <ChartCard title="实时监控" grid-area="h">
        <div class="realtime-grid">
          <div class="realtime-item-small">
            <div class="realtime-label-small">在线用户</div>
            <div class="realtime-value-small">{{ online }}</div>
          </div>
          <div class="realtime-item-small">
            <div class="realtime-label-small">订单/分钟</div>
            <div class="realtime-value-small">{{ ordersPerMin }}</div>
          </div>
          <div class="realtime-item-small">
            <div class="realtime-label-small">销售额/时</div>
            <div class="realtime-value-small">¥{{ salesPerHour }}</div>
          </div>
          <div class="realtime-item-small">
            <div class="realtime-label-small">系统状态</div>
            <div class="realtime-value-small status-ok">正常</div>
          </div>
        </div>
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const salesOverviewOption = ref({})
const userOverviewOption = ref({})
const operationOption = ref({})
const financeOverviewOption = ref({})
const trendCompareOption = ref({})
const regionCompareOption = ref({})

const online = ref(0)
const ordersPerMin = ref(0)
const salesPerHour = ref(0)

onMounted(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月']
  
  salesOverviewOption.value = getLineOption({
    categories: months,
    series: [{
      name: '销售额',
      data: [1500, 1800, 1600, 2000, 2200, 2500]
    }]
  })

  userOverviewOption.value = getLineOption({
    categories: months,
    series: [{
      name: '用户数',
      data: [80000, 90000, 95000, 100000, 110000, 125000]
    }]
  })

  operationOption.value = getBarOption({
    categories: ['访问', '注册', '购买', '复购'],
    series: [{
      name: '数量',
      data: [500000, 50000, 10000, 3000]
    }]
  })

  financeOverviewOption.value = getPieOption({
    name: '收入构成',
    data: [
      { value: 6000, name: '产品销售' },
      { value: 4000, name: '服务收入' },
      { value: 2000, name: '广告收入' },
      { value: 500, name: '其他' }
    ]
  })

  trendCompareOption.value = getLineOption({
    categories: months,
    series: [{
      name: '销售额',
      data: [1500, 1800, 1600, 2000, 2200, 2500]
    }, {
      name: '用户数',
      data: [80, 90, 95, 100, 110, 125]
    }]
  })

  regionCompareOption.value = getPieOption({
    name: '区域',
    data: [
      { value: 35, name: '华东' },
      { value: 28, name: '华北' },
      { value: 20, name: '华南' },
      { value: 12, name: '西南' },
      { value: 5, name: '其他' }
    ]
  })

  online.value = Math.floor(Math.random() * 5000) + 2000
  ordersPerMin.value = Math.floor(Math.random() * 50) + 10
  salesPerHour.value = Math.floor(Math.random() * 50000) + 10000
})
</script>

<style scoped>
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 15px;
  height: 100%;
}

.kpi-item-small {
  text-align: center;
  padding: 15px;
  background: rgba(24, 144, 255, 0.05);
  border-radius: 8px;
}

.kpi-label-small {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.kpi-value-small {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
}

.realtime-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 15px;
  height: 100%;
}

.realtime-item-small {
  text-align: center;
  padding: 15px;
  background: rgba(24, 144, 255, 0.05);
  border-radius: 8px;
}

.realtime-label-small {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.realtime-value-small {
  font-size: 24px;
  font-weight: bold;
  color: #36cfc9;
}

.status-ok {
  color: #52c41a !important;
}
</style>
